<template>
    <el-date-picker
            v-model="range"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="opts"
            :clearable="false"
            @change="onChange"
            align="left">
    </el-date-picker>
</template>
<script lang="ts">

    import {Vue, Component, Prop,Watch} from 'vue-property-decorator'
    import moment from 'moment'

    @Component({
        name: "AdminDateRange"
    })
    export default class AdminDateRange extends Vue {

        @Prop({
            required:true,
            type:String
        })
        beginTime;

        @Prop({
            required:true,
            type:String
        })
        endTime;

        loadView() {

            let begin = this.toDate(this.beginTime);
            let end = this.nextDate(begin);

            if(this.endTime.length !== 0 ){
                end = this.toDate(this.endTime);
            }

            this.range = [
                begin,end
            ];

            this.$emit(
                'change',
                moment(begin).toISOString(true),
                moment(end).toISOString(true))
        }

        @Watch('beginTime')
        beginChange() {
            this.loadView()
        }

        @Watch('endTime')
        endChange() {
            this.loadView()
        }

        shortClick(size:any, x:any, offset?:any) {
            return (picker: any) => {
                let begin = this.range[0];
                if(offset) {
                    begin = moment(begin).add(offset,x).toDate()
                }

                let end = moment(begin).add(size,x).toDate();
                picker.$emit('pick',[begin,end])
            };

        }

        opts = {
            shortcuts: [{
                text: '上半天',
                onClick: this.shortClick(12, 'hours')
            },{
                text: '下半天',
                onClick: this.shortClick(12, 'hours', 12)
            },{
                text: '一天',
                onClick: this.shortClick(1,'days')
            }, {
                text: '两天',
                onClick: this.shortClick(2,'days')
            },{
                text: '三天',
                onClick: this.shortClick(3,'days')
            },{
                text: '一周',
                onClick: this.shortClick(7,'days')
            }]
    };

        range: Array<Date,Date> = [];

        toDate(value: any) : Date {

            if(typeof value === 'string') {
                if(value.length === 0 ){
                    value = moment();
                }
            }

            return moment(value).toDate()
        }

        nextDate(value: any) : Date {
            return moment(value).add(1,'days').toDate()
        }

        onChange(values: Array<Date,Date>) {
            this.$emit(
                'change',
                moment(values[0]).toISOString(true),
                moment(values[1]).toISOString(true))
        }

        mounted() {

            this.loadView();
        }
    }
</script>